<template>
	<view class="main_bgc">
		<view class="title">
			<img src="../../static/Slice 16@2x.png" />
		</view>

		<!--  -->
		<view class="details">
			<view class="details_title">
				<img src='../../static/xin/Slice 12@2x.png' />
				<text>三步申请 轻松到账</text>
				<img src='../../static/xin/Slice 13@2x.png' />
			</view>
			<view class="title_xiao">“流程简单、快速借款”</view>
			<view class="details_del">
				<view>
					<view class="details_del_img">
						<img src='../../static/xin/Slice 17@2x.png' />
					</view>
					<view class="details_del_text">登录注册</view>
				</view>
				<view>
					<view class="details_del_img">
						<img src='../../static/xin/Slice 18@2x.png' />
					</view>
					<view class="details_del_text">提交/申请</view>
				</view>
				<view>
					<view class="details_del_img">
						<img src='../../static/xin/Slice 19@2x.png' />
					</view>
					<view class="details_del_text">审核下款</view>
				</view>
			</view>
		</view>

		<!--发展历程 -->
		<view class="development">
			<view class="development_title">
				<img src='../../static/xin/Slice 12@2x.png' />
				<text>发展历程</text>
				<img src='../../static/xin/Slice 13@2x.png' />
			</view>
			<view class="development_top">
				<view v-for="item in developmentList" class="development_top_item">
					<view class="development_top_item_title">{{item.title}}</view>
					<view class="development_top_item_content">{{item.content}}</view>
				</view>
			</view>

			<!-- 步骤条 -->
			<view class="developmentbuzhou">
				<view class="development_yuan"></view>
				<view class="development_tiao"></view>
				<view class="development_yuan"></view>
				<view class="development_tiao"></view>
				<view class="development_yuan"></view>
			</view>
			<view class="fgx"></view>
			<!-- 息费透明，合规经营 -->
			<view class="explain">
				<view v-for="(item,i) in explainList" class="explain_item">
					<view class="explain_item_title">
						<img src='../../static/xin/Slice 12@2x.png' />
						<text>{{item.title}}</text>
						<img src='../../static/xin/Slice 13@2x.png' />
					</view>
					<view class="explain_item_list" :class="i==0?'explain_item_list_item1':''">
						<view v-for="ele in item.list" class="explain_item_list_item" :class="ele.class">
							<view class="explain_item_list_title">{{ele.title}}</view>
							<view class="explain_item_list_content">{{ele.content}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				developmentList: [{
					title: '探索全面的金融服务体系',
					content: '2023年8月，极享客上线，主要提供线上小额、大额借款、分期；线上征信查询；线上黑名单检测；多头借贷检测服务。'
				}, {
					title: '匹配精准的信贷产品',
					content: '2023年，通过大数据分析、人工智能和机器学习技术，为金融市场提供资产精准匹配，提供前置风险、精准营销等金融助贷数字营销服务。'
				}, {
					title: '提供安全可靠的金融服务',
					content: '目前，极享客已累计服务用户30万，合作平台超100家，金融借贷撮合规模超30亿，获得客户的一致好评和信赖，金融科技服务位于西南地区领先地位。'
				}],
				explainList: [{
						title: '息费透明，合规经营',
						list: [{
								title: '符合国家监管要求',
								content: '极享客向您承诺:严格遵守国家政策，免费申请，无年费，无管理费。',
								bgimg: "../../static/xin/Slice 20@2x.png",
								class: 'bgimg1',
							},
							{
								title: '拥抱合规/银行合作',
								content: '与银行产品合作，为您 提供合规产品服务，无 需担心套路。',
								bgimg: "../../static/xin/Slice 21@2x.png",
								class: 'bgimg2',
							}
						]
					},
					{
						title: '信息加密，绝不泄露',
						list: [{
								title: '个人信息加密',
								bgimg: "../../static/xin/Slice 22@2x.png",
								content: '应用加密算法，全程加密用户信息，为隐私筑墙，杜绝任何形式的个人信息泄露。',
								class: 'bgimg3',
							},
							{
								title: '放款时多重认证',
								bgimg: "../../static/xin/Slice 23@2x.png",
								content: '保障用户安全，请您放心使用。',
								class: 'bgimg4',
							}
						]
					}
				]
			}
		}
	}
</script>

<style>
	.main_bgc {
		width: 752rpx;
		height: 2200rpx;
		background: linear-gradient(180deg, #D9E8FF 0%, #FFFFFF 58%, #FFFFFF 99%);

		.title {
			width: 572rpx;
			height: 62rpx;
			/* font-family: ShiShangZhongHeiJianTi, ShiShangZhongHeiJianTi; */
			font-weight: 400;
			font-size: 52rpx;
			color: #264DD8;
			line-height: 61rpx;
			margin: 0 auto;
			padding-top: 34rpx;
			padding-bottom: 36rpx;
			text-align: center;

			img {
				height: 80rpx;
			}
		}

		.details {
			width: 670rpx;
			height: 372rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 14rpx 0rpx #92B8F1;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			text-align: center;

			.details_title {
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #264DD8;
				line-height: 38rpx;
				/* text-align: center; */
				margin: 0 auto;
				padding-top: 30rpx;
				padding-bottom: 8rpx;

				img {
					height: 22rpx;
					/* 	margin-left: 15rpx;
					margin-right: 15rpx; */
				}

				text {
					margin: 0 10prx;
					text-shadow: 4rpx 4rpx 10rpx #b9d4ff;
				}
			}

			.title_xiao {
				/* width: 220rpx; */
				height: 30rpx;
				/* font-family: PingFang SC, PingFang SC; */
				font-weight: 400;
				font-size: 22rpx;
				color: #5D81FF;
				line-height: 26rpx;
				text-align: center;
				/* font-style: normal;
				text-transform: none; */
			}

			.details_del {
				display: flex;
				justify-content: space-around;
				margin-top: 70rpx;

				.details_del_img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					line-height: 130rpx;
					margin-bottom: 16rpx;

					img {
						width: 100%;
					}
				}

				.details_del_text {
					/* width: 96rpx; */
					height: 34rpx;
					/* font-family: PingFang SC, PingFang SC; */
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 28rpx;
					text-align: center;
					/* font-style: normal;
					text-transform: none; */
				}
			}



		}

		.development {
			width: 680rpx;
			height: 1590rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(146, 184, 241, 0.5);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			margin-top: 28rpx;

			.developmentbuzhou {
				position: absolute;
				top: 648rpx;
				left: 73rpx;
				display: flex;
				flex-direction: column;
				justify-items: center;
				width: 14rpx;
				align-items: center;
				.development_yuan {
					width: 14rpx;
					height: 14rpx;
					background: #264DD8;
					border-radius: 7rpx;
				}
				.development_tiao{
					width: 2rpx;
					height: 185rpx;
					background: #DEE2FA;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}

			.development_title {
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #264DD8;
				line-height: 38rpx;
				text-align: center;
				padding-top: 32rpx;
				margin-bottom: 40rpx;

				img {
					height: 22rpx;
					/* padding-left: 20rpx;
					padding-right: 20rpx; */
				}

				text {
					margin: 0 20rpx;
					text-shadow: 4rpx 4rpx 10rpx #b9d4ff;
				}
			}

			.development_top {
				width: 614rpx;
				/* text-align: center; */


				.development_top_item {
					margin-left: 73rpx;
					margin-bottom: 28rpx;

					.development_top_item_title {
						width: 308rpx;
						height: 40rpx;
						/* font-family: PingFang SC, PingFang SC; */
						font-weight: 500;
						font-size: 28rpx;
						color: #264DD8;
						line-height: 33rpx;
						text-align: left;
						margin-bottom: 16rpx;
						/* font-style: normal;
						text-transform: none; */
					}

					.development_top_item_content {
						width: 578rpx;
						height: 116rpx;
						/* font-family: PingFang SC, PingFang SC; */
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						line-height: 35rpx;
						text-align: left;
						/* font-style: normal;
						text-transform: none; */
					}
				}



			}

			.fgx {
				width: 614rpx;
				height: 2rpx;
				background: #EEEEEE;
				margin: 0 auto;
				margin-bottom: 40rpx;
			}

			.explain {
				.explain_item {
					.explain_item_title {
						height: 44rpx;
						font-weight: bold;
						font-size: 32rpx;
						color: #264DD8;
						line-height: 38rpx;
						text-align: center;
						margin-bottom: 30rpx;

						img {
							height: 22rpx;
							/* padding-left: 15rpx;
							padding-right: 15rpx; */
						}

						text {
							margin: 0 14rpx;
							text-shadow: 4rpx 4rpx 10rpx #b9d4ff;
						}
					}


					.explain_item_list {
						display: flex;
						justify-content: space-around;

						.bgimg1 {
							background-image: url('../../static/xin/Slice 20@2x.png');
						}

						.bgimg2 {
							background-image: url('../../static/xin/Slice 21@2x.png');
						}

						.bgimg3 {
							background-image: url('../../static/xin/Slice 22@2x.png');
						}

						.bgimg4 {
							background-image: url('../../static/xin/Slice 23@2x.png');
						}

						.explain_item_list_item {
							width: 255rpx;
							height: 294rpx;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							padding: 0 20rpx;
							background-repeat: no-repeat;
							background-size: contain;

							.explain_item_list_title {
								height: 40rpx;
								font-weight: 500;
								font-size: 28rpx;
								color: #264DD8;
								line-height: 33rpx;
								text-align: center;
								padding-top: 60rpx;
								margin-bottom: 20rpx;
							}

							.explain_item_list_content {
								/* width: 260rpx; */
								height: 136rpx;
								font-weight: 500;
								font-size: 25rpx;
								color: #666666;
								line-height: 35rpx;
								margin: 0 auto;
								letter-spacing: 0.1rem;
								/* padding-left:5rpx; */
							}
						}

					}

					.explain_item_list_item1 {
						/* margin-top: 20rpx; */
						width: 614rpx;
						margin: 0 auto;
						border-bottom: 2rpx solid #eee;
						margin-bottom: 40rpx;
						padding-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>